<!DOCTYPE html>
<html>
<head>
    <style>
        .container { padding: 20px; }
        .string-display {
            display: flex;
            margin: 20px 0;
            font-family: monospace;
        }
        .char-box {
            width: 40px;
            height: 40px;
            border: 1px solid #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 5px;
        }
        .window-highlight {
            background-color: #e3f2fd;
        }
        .counters {
            display: flex;
            gap: 20px;
            margin: 20px 0;
        }
        .counter-table {
            border-collapse: collapse;
        }
        .counter-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        .highlight { background-color: #c8e6c9; }
        .negative { background-color: #ffcdd2; }
        button { margin: 10px; padding: 5px 15px; }
    </style>
</head>
<body>
    <div class="container">
        <h3>和为 K 的子数组动画演示：nums=[1, 2, 1, 2, 1], k=3</h3>

        <!-- 数组展示 -->
        <div id="arrayDisplay" class="string-display"></div>

        <!-- 前缀和计数器展示 -->
        <div class="counters">
            <div>
                <div>前缀和计数：</div>
                <table id="prefixSums" class="counter-table"></table>
            </div>
        </div>

        <!-- 结果展示 -->
        <div>找到的子数组：<span id="result"></span></div>

        <!-- 控制按钮 -->
        <button onclick="startAnimation()">开始</button>
        <button onclick="pauseAnimation()">暂停</button>
        <button onclick="resetAnimation()">重置</button>
    </div>

    <script>
        // 初始化数据
        const nums = [1, 2, 1, 2, 1];
        const k = 3;
        let currentIndex = 0;
        let animationSpeed = 1000; // 每个步骤间隔1秒(1000ms)
        let animationTimer = null; // 改用setInterval控制
        let prefixSum = 0;
        let prefixSums = {0: 1}; // 初始化前缀和为0的情况
        let count = 0;

        // 初始化显示
        function initDisplay() {
            const arrayDisplay = document.getElementById('arrayDisplay');
            arrayDisplay.innerHTML = nums.map((num, i) =>
                `<div class="char-box" id="num${i}">${num}</div>`
            ).join('');

            // 初始化前缀和计数表
            initCounterTable('prefixSums', prefixSums);
        }

        // 初始化计数表
        function initCounterTable(id, counts) {
            const table = document.getElementById(id);
            let html = '<tr>';
            for (let sum in counts) {
                html += `<td>${sum}<br><span id="${id}_${sum}">${counts[sum]}</span></td>`;
            }
            table.innerHTML = html + '</tr>';
        }

        // 更新计数显示
        function updateCounter(id, counts) {
            let html = '';
            for (let sum in counts) {
                html += `<td>${sum}<br><span id="${id}_${sum}">${counts[sum]}</span></td>`;
            }
            document.getElementById(id).innerHTML = '<tr>' + html + '</tr>';
        }

        // 动画步骤
        function animationStep() {
            if (currentIndex >= nums.length) {
                clearInterval(animationTimer);
                return;
            }

            // 更新当前元素高亮
            document.querySelectorAll('.char-box').forEach((box, i) => {
                box.classList.toggle('window-highlight',
                    i <= currentIndex);
            });

            // 更新前缀和
            prefixSum += nums[currentIndex];

            // 检查是否存在一个前缀和 prefixSum - k
            if (prefixSum - k in prefixSums) {
                count += prefixSums[prefixSum - k];
                document.getElementById('result').textContent += ` [${nums.slice(currentIndex - (prefixSum - k), currentIndex + 1)}]`;
            }

            // 更新前缀和计数
            if (prefixSum in prefixSums) {
                prefixSums[prefixSum] += 1;
            } else {
                prefixSums[prefixSum] = 1;
            }

            // 更新显示
            updateCounter('prefixSums', prefixSums);

            currentIndex++;
        }

        // 控制函数
        function startAnimation() {
            if (!animationTimer) {
                animationStep(); // 立即执行第一步
                animationTimer = setInterval(animationStep, animationSpeed);
            }
        }

        function pauseAnimation() {
            clearInterval(animationTimer);
            animationTimer = null;
        }

        function resetAnimation() {
            pauseAnimation();
            currentIndex = 0;
            prefixSum = 0;
            prefixSums = {0: 1};
            count = 0;
            document.getElementById('result').textContent = '';
            initDisplay();
        }

        // 初始化
        initDisplay();
    </script>
</body>
</html>
